<template>
    <div id="all">
      <el-card>
           <!--模糊查询-->
      <div class="search">
              <el-row gutter="20">
                  <el-col :span="6">
                      <el-input
                              v-model="query.pdaNo"
                              size="medium"
                              placeholder="请输入泊位编号">
                      </el-input>
                  </el-col>
                  <el-col :span="6">
					<el-input
							v-model="query.pdaName"
							size="medium"
							placeholder="设备名称">
					</el-input>
				</el-col>
                  <el-col :span="2">
                      <el-button type="primary" size="medium" @click="loadPda">查询</el-button>
                  </el-col>
                  
                  <el-col :span="8">
                      <el-button type="info" size="medium" @click="reset">重置</el-button>
                  </el-col>
          <el-col :span="2">
            <el-button type="success" size="medium" @click="dialog.addshow=true">添加</el-button>
          </el-col>
              </el-row>
          </div>
  
           <!--表格-->
           <el-table
                  :data="parkTableData"
                  stripe
                  style="width: 100%;margin-top:10px">
              <el-table-column
                      prop="pdaNo"
                      label="设备编号">
              </el-table-column>
              <el-table-column
                      prop="pdaStatus"
                      label="设备状态">
            <template slot-scope="scope">
          				<span v-if="scope.row.pdaStatus=='0'">在线</span>
          				<span v-if="scope.row.pdaStatus=='1'">离线</span>
         				</template>
              </el-table-column>
              <el-table-column
                      prop="insNickname"
                      label="当前使用者">
              </el-table-column>
              <el-table-column
                      prop="secName"
                      label="所属路段">
              </el-table-column>
              <el-table-column
                      prop="pdaName"
                      label="设备名称">
              </el-table-column>
              <el-table-column
                      prop="pdaTime"
                      label="时间">
              </el-table-column>
              <el-table-column label="操作" width="150">
                  <template slot-scope="scope">
                      <el-dropdown trigger="click">
                          <el-button size="mini" type="warning" >编辑</el-button>
                          <el-dropdown-menu slot="dropdown">
                              <el-dropdown-item class="clearfix">
                                  <el-button size="mini" type="priamry" @click="handleEdit(scope.row.pdaId)" plain>修改</el-button>
                              </el-dropdown-item>
                              <el-dropdown-item class="clearfix">
                                  <el-popconfirm
                                          title="这是一段内容确定删除吗？"  @confirm="handleDelete(scope.row.pdaId)">
                                      <el-button size="mini" slot="reference" type="danger">删除</el-button>
                                  </el-popconfirm>
                              </el-dropdown-item>
                          </el-dropdown-menu>
                      </el-dropdown>
                  </template>
              </el-table-column>
               </el-table>
  
           <!--分页-->
           <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="query.currentPage"
                  :page-sizes="pageInfo.pageSizes"
                  :page-size="query.pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="pageInfo.total"
          >
          </el-pagination>
  
      <!--添加pda-->
      <el-dialog title="添加设备" :visible.sync="dialog.addshow" width="30%">
              <el-form ref="addForm" :model="addForm" label-width="80px">
                  <el-row>
                      <el-col :span="24">
                        <el-form-item label="设备编号" prop="padNo">
							<el-input v-model="addForm.padNo"></el-input>
						</el-form-item>
						<el-form-item label="设备名称" prop="pdaName">
							<el-input v-model="addForm.pdaName"></el-input>
						</el-form-item>
						<el-form-item label="设备状态" prop="pdaStatus" >
                			<el-input v-model="addForm.pdaStatus" clearable ></el-input>
              			</el-form-item>
                          <el-form-item label="使用者" prop="insId">
									<el-select
										v-model="addForm.insId"
										placeholder="请选择"
										style="width: 100%"
									>
										<el-option
										v-for="item in insList"
										:key="item.insId"
										:label="item.insNickname"
										:value="item.insId"
										>
										</el-option>
									</el-select>
									</el-form-item>
                      </el-col>
                  </el-row>
              </el-form>
              <span slot="footer" class="dialog-footer">
          <el-button @click="dialog.addshow = false">取 消</el-button>
          <el-button type="primary" @click="save()">确 定</el-button>
        </span>
      </el-dialog>

      <!--更改pda-->
      <el-dialog title="修改pda信息" :visible.sync="dialog.updateshow" width="30%">
			<el-form ref="updateForm" :model="updateForm" label-width="80px">
				<el-row>
					<el-col :span="24">
						<el-form-item label="设备编号" prop="padNo">
							<el-input v-model="updateForm.padNo"></el-input>
						</el-form-item>
						<el-form-item label="设备名称" prop="pdaName">
							<el-input v-model="updateForm.pdaName"></el-input>
						</el-form-item>
						<el-form-item label="设备状态" prop="pdaStatus" >
                			<el-input v-model="updateForm.pdaStatus" clearable ></el-input>
              			</el-form-item>
                          <el-form-item label="使用者" prop="insId">
									<el-select
										v-model="updateForm.insId"
										placeholder="请选择"
										style="width: 100%"
									>
										<el-option
										v-for="item in insList"
										:key="item.insId"
										:label="item.insNickname"
										:value="item.insId"
										>
										</el-option>
									</el-select>
									</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<span slot="footer" class="dialog-footer">
        <el-button @click="dialog.updateshow = false">取 消</el-button>
        <el-button type="primary" @click="update()">确 定</el-button>
      </span>
		</el-dialog>
      </el-card>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        insList:{},
        updateForm:{},
        addForm:{},
        pageInfo: {
            pageSizes: [5, 10, 20, 50],
            total: 0,
          },
        query:{
            pdaNo:"",
            pdaName:"",
            currentPage:1,
            pageSize:5
          },
        dialog: {
            addshow: false,
            updateshow: false,
          },
      };
    },
    methods: {
      loadPda(){
          this.$axios.post("/admin/pda/getAllPda", this.query).then((res) => {
                      this.parkTableData = res.data.data.list;
                      this.pageInfo.total = res.data.data.total;
            });
      },
       //请求所有的路段
       loadIns() {
				this.$axios.post("admin/ins/getAllIns", this.query).then((res) => {
					this.insList = res.data.data.list;
				});
			},
      reset(){
          this.query.pdaNo = "";
          this.query.pdaName = "";
          this.loadPda();
      },
      save(){
        this.$axios.post("admin/pda", this.addForm).then((res) => {
          		this.$message.success("添加成功");
              this.loadPda();
          		this.dialog.addshow = false;
          		//需要指定prop属性
          		this.$refs.addForm.resetFields();
            	//重置上传控件
         		this.$refs.upload.clearFiles();
          		  //修改是否显示对应的值
         		this.upload.uploadDisabled = false;
        });
      },
      handleDelete(id){
      this.$axios.delete("admin/pda/" + id).then((res) => {
			if (res.data.code == 200) {
				this.$message.success("删除成功");
				this.loadPda();
				} else {
				this.$message.info("删除失败");
				}
		})
    },
    handleEdit(id) {
		this.$axios.get("admin/pda/" + id).then(res => {
			this.updateForm = res.data.data;
		});
			this.dialog.updateshow = true;
	    },
    update(id){
        this.$axios.put("admin/pda/"+id, this.updateForm).then((res) => {
				  if (res.data.code == 200) {
					  this.$message.success("修改成功");
					    this.dialog.updateshow = false;
					    this.loadPda();			
				} else {
					his.$message.error("修改失败");
					}
				})
    },
    },
    mounted(){
      this.loadPda();
      this.loadIns();
    }
  };
  </script>